<template>
  <div class="talk">
    <button @click="getLoveTalk">获取一句土味情话</button>
    <ul>
      <li v-for="item in loveTalkStore.talkList" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>
<script lang="ts" setup name="LoveTalk">

import { useTalkStore } from "@/store/loveTalk";

const loveTalkStore = useTalkStore()

const getLoveTalk = async () => {
  try {
    const response = await fetch("/api/rand.qinghua?format=json");
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const res = await response.json();
    console.log(res);
    const data =  handleData(res)
    loveTalkStore.talkList.push(data)
  } catch (error) {
    console.error("Error:", error);
  }
};
const handleData = (res: any) => {
  const obj = {
    id: res.content,
    title: res.content
  }
  return obj
}
</script>
<style scoped>
.talk {
  background-color: orange;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
</style>
